import React, { Component } from 'react'

import {getCategoryList, getBrandList, getProList} from '../../api/kind'

import { SideBar, Tabs, Grid, Image, AutoCenter } from 'antd-mobile'

import './index.scss'

import { NavLink } from 'react-router-dom'

export default class Inedx extends Component {

  state = {
    categoryList: [], // 分类列表
    activeKey: '', // 当前选中的分类
    brandList: [], // 品牌列表
    active: '', // 当前选中的品牌
    proList: [] // 某分类下某品牌的所有商品
  }

  componentDidMount(){
    // 获取所有分类
    getCategoryList().then(res => {
      // console.log(res.data);
      this.setState({
        categoryList: res.data,
        activeKey: res.data[0]
      })

      // 获取第一个分类下的品牌
      getBrandList({category: res.data[0]}).then(res => {
        // console.log(res.data);
        this.setState({
          brandList: res.data,
          active: res.data[0].brand
        })

        // 获取分类下某品牌的所有商品
        getProList({
          category: this.state.activeKey,
          brand: this.state.active
        }).then(res => {
          console.log(res);
          this.setState({
            proList: res.data
          })
        })
      })

    })



  }

  // 点击左边分类的回调函数
  changeCategory(key){
    this.setState({
      activeKey: key
    })


    // 获取当前分类下的品牌
    getBrandList({category: key}).then(res => {
      // console.log(res.data);
      this.setState({
        brandList: res.data,
        active: res.data[0].brand
      })

      // 获取当前分类下某品牌的所有商品
      getProList({
        category: this.state.activeKey,
        brand: res.data[0].brand
      }).then(res => {
        console.log(res);
        this.setState({
          proList: res.data
        })
      })
    })

  }

  // 点击顶部品牌的回调函数
  changeBrand(key){
    // console.log(key);
    this.setState({
      active: key
    })

    // 获取当前分类下某品牌的所有商品
    getProList({
      category: this.state.activeKey,
      brand: key
    }).then(res => {
      // console.log(res);
      this.setState({
        proList: res.data
      })
    })
  }

  render() {

    const {categoryList, activeKey, brandList, active, proList} = this.state

    return (
        <div className='box'>
        <header className='header'> 分类 </header>

        <div className='content kind_content'>
            <div className='kind_left'>
              <SideBar 
              onChange={(key)=>{
                this.changeCategory(key);
              }}
              activeKey={activeKey} 
              style={{'--adm-color-primary': '#f66'}}>
                {categoryList.map(item => (
                  <SideBar.Item key={item} title={item} />
                ))}
              </SideBar>
            </div>

            <div className='kind_right'>

            <Tabs onChange={(key)=>{
              this.changeBrand(key)
            }} activeKey={active} style={{'--adm-color-primary': '#f66'}}>
              {
                brandList.map(item => (
                  <Tabs.Tab title={item.brand} key={item.brand}></Tabs.Tab>
                ))
              }
            </Tabs>

            <Grid columns={2} gap={8}>
              {proList && proList.map(item => (<NavLink to={'/detail/' + item.proid} key={item.proid}>
                <Grid.Item>
                  <AutoCenter>
                  <Image src={item.img1} />
                  <div style={{textAlign: 'center'}}>{item.brand}</div>
                  </AutoCenter>
              </Grid.Item>
              </NavLink>))}
             
            </Grid>

            </div>

        </div>
      </div>
    )
  }
}
